<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>数据库课程设计</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <link href="static/img/favicon.png" rel="icon">
    <link href="static/img/apple-touch-icon.png" rel="apple-touch-icon">
    <link href="static/vendor/aos/aos.css" rel="stylesheet">
    <link href="static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="static/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="static/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
</head>
<body>
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
<header id="header" class="d-flex flex-column justify-content-center">
    <nav id="navbar" class="navbar nav-menu">
        <ul>
            <li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
            <li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
        </ul>
    </nav>
</header>
<section id="hero" class="d-flex flex-column justify-content-center">
    <div class="container" data-aos="zoom-in" data-aos-delay="100">
        <h1>数据库课程设计</h1>
        <p>I'm <span class="typed" data-typed-items="23云计算运维向正瑞"></span></p>
    </div>
</section>
<main id="main">
    <section id="about" class="about">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h2>图书查询</h2>
                {#      设置执行动作和请求方式       #}
                <form action="/add" method="post">
                    <lable>编号:</lable>
                    <input name="id" required="required" type="text" class="book-input" id="bh">
                    <lable>书名:</lable>
                    <input name="books" required="required" type="text" class="book-input" id="sm">
                    <lable>作者:</lable>
                    <input name="name" type="text" required="required" class="name-input" id="zz">
                    <lable>价格:</lable>
                    <input name="price" required="required" type="text" class="price-input" id="jg">
                    <button type="submit" id="add-button" class="btn btn-outline-success">添加</button>
                </form>

         <table style="margin-left: 250px">
            <tr>
                <td>
                    <form action="/sele" method="post">
                        <lable>根据编号查询:</lable>
                        <input name="sele" required="required" type="text" class="price-input" id="cx" placeholder="请输入图书编号">
                        <button type="submit" id="add-button" class="btn btn-outline-success">查询</button>
                    </form>
                </td>
                <td>
                    <form action="/sele1" method="post">
                        <lable>根据名称查询:</lable>
                        <input name="name" required="required" type="text" class="price-input" id="name" placeholder="请输入图书名称">
                        <button type="submit" id="add-button" class="btn btn-outline-success">查询</button>
                    </form>
                </td>
            </tr>
         </table>
                <table class="table table-bordered">
                    <tr>
                        <th>图书编号</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                    {% for i in data %}
                        <tr>
                            <td>{{ i[0] }}</td>
                            <td>{{ i[2] }}</td>
                            <td>{{ i[1] }}</td>
                            <td>{{ i[3] }}</td>
                            <td>
                                <button onclick="updata({{ i[0] }})" type="button" class="btn btn-primary">修改</button>
                                <button onclick="dele({{ i[0] }})" type="button" class="btn btn-danger"value={{ deldata }}>删除</button>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </section>
    <section id="facts" class="facts">
        <div class="container" data-aos="fade-up">
        </div>
    </section>
</main>

<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
        class="bi bi-arrow-up-short"></i></a>
<script src="static/vendor/aos/aos.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/vendor/glightbox/js/glightbox.min.js"></script>
<script src="static/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="static/vendor/php-email-form/validate.js"></script>
<script src="static/vendor/purecounter/purecounter.js"></script>
<script src="static/vendor/swiper/swiper-bundle.min.js"></script>
<script src="static/vendor/typed.js/typed.min.js"></script>
<script src="static/vendor/waypoints/noframework.waypoints.js"></script>
<script src="static/js/main.js"></script>
<script src="../static/jquery-3.4.1.js"></script>
</body>

<script>
    function dele(id) {
        location.href = '/dele?id=' + id
        {#alert("删除成功。。。")#}
    }
    function updata(id) {
        location.href = '/updata?id=' + id
    }

    function getid(id) {
        location.href = '/getId?id=' + id
    }

</script>

</html>